<template>
	<view class="pages">
		<!-- :headerBg="'#fff'" -->
		<headerMain
		@goBack="goBack" :backColor="'black'"
		:heightTop="heightTop"
		:headerTitle="'分类'" :titleColor="'#000'"
		@goNext="goNext"
		:rightTitle="'上传'" :rightColor="'#000'" 
		/>
		<!-- <goodsList :status="loadStatus" :list="list" @btnClick="btnClick"></goodsList> -->
		<zlxls-goods-edit-list :status="loadStatus" :productList="list" :column="2" @btnClick="btnClick"></zlxls-goods-edit-list>
		
		<!-- 底部导航 -->
		<!-- <tabbar :current="1" /> -->
		
	</view>
</template>

<script>
	// import goodsList from '@/components/zlxls-goods-list/zlxls-goods-list.vue'
	import zlxlsGoodsEditList from "@/components/zlxls-goods-list/zlxls-goods-list.vue";
	export default {
		components: {
			// goodsList
			zlxlsGoodsEditList
		}, 
		data() {
			return { 
				heightTop: 0,
				loadStatus: 'loadding',
				list: [
					{
						"id": 14,
						"name": "真维斯针织衫女夏季洋气设计感时尚潮流冰丝V领上衣女粉色均码",
						"marks": [
							"库存 100",
						],
						"cover": "https://img1.360buyimg.com/n6/jfs/t1/109738/7/40737/75073/649ea86bFa8def1b4/b0517e212c2d576c.jpg",
						"total": "15880.00",
						"number": 10,
						"cate_name1": "女装",
						"cate_name2": "臻选",
						"cate_name3": "热款",
						"is_hot":1,
						"status":1,
						"create_at":"2023-0714 12:00:00"
					},
					{
						"id": 14,
						"name": "真维斯针织衫女夏季洋气设计感时尚潮流冰丝V领上衣女粉色均码",
						"marks": [
							"库存 200",
						],
						"cover": "https://img1.360buyimg.com/n6/jfs/t1/109738/7/40737/75073/649ea86bFa8def1b4/b0517e212c2d576c.jpg",
						"total": "15880.00",
						"number": 10,
						"cate_name1": "女装",
						"cate_name2": "臻选",
						"cate_name3": "热款",
						"is_hot":1,
						"status":1,
						"create_at":"2023-0714 12:00:00"
					},{
						"id": 14,
						"name": "真维斯针织衫女夏季洋气设计感时尚潮流冰丝V领上衣女粉色均码",
						"marks": [
							"库存 200",
						],
						"cover": "https://img1.360buyimg.com/n6/jfs/t1/109738/7/40737/75073/649ea86bFa8def1b4/b0517e212c2d576c.jpg",
						"total": "15880.00",
						"number": 10,
						"cate_name1": "女装",
						"cate_name2": "臻选",
						"cate_name3": "热款",
						"is_hot":1,
						"status":1,
						"create_at":"2023-0714 12:00:00"
					},{
						"id": 14,
						"name": "真维斯针织衫女夏季洋气设计感时尚潮流冰丝V领上衣女粉色均码",
						"marks": [
							"库存 200",
						],
						"cover": "https://img1.360buyimg.com/n6/jfs/t1/109738/7/40737/75073/649ea86bFa8def1b4/b0517e212c2d576c.jpg",
						"total": "15880.00",
						"number": 10,
						"cate_name1": "女装",
						"cate_name2": "臻选",
						"cate_name3": "热款",
						"is_hot":1,
						"status":1,
						"create_at":"2023-0714 12:00:00"
					},{
						"id": 14,
						"name": "真维斯针织衫女夏季洋气设计感时尚潮流冰丝V领上衣女粉色均码",
						"marks": [
							"库存 200",
						],
						"cover": "https://img1.360buyimg.com/n6/jfs/t1/109738/7/40737/75073/649ea86bFa8def1b4/b0517e212c2d576c.jpg",
						"total": "15880.00",
						"number": 10,
						"cate_name1": "女装",
						"cate_name2": "臻选",
						"cate_name3": "热款",
						"is_hot":1,
						"status":1,
						"create_at":"2023-0714 12:00:00"
					},{
						"id": 14,
						"name": "真维斯针织衫女夏季洋气设计感时尚潮流冰丝V领上衣女粉色均码",
						"marks": [
							"库存 200",
						],
						"cover": "https://img1.360buyimg.com/n6/jfs/t1/109738/7/40737/75073/649ea86bFa8def1b4/b0517e212c2d576c.jpg",
						"total": "15880.00",
						"number": 10,
						"cate_name1": "女装",
						"cate_name2": "臻选",
						"cate_name3": "热款",
						"is_hot":1,
						"status":1,
						"create_at":"2023-0714 12:00:00"
					},{
						"id": 14,
						"name": "真维斯针织衫女夏季洋气设计感时尚潮流冰丝V领上衣女粉色均码",
						"marks": [
							"库存 200",
						],
						"cover": "https://img1.360buyimg.com/n6/jfs/t1/109738/7/40737/75073/649ea86bFa8def1b4/b0517e212c2d576c.jpg",
						"total": "15880.00",
						"number": 10,
						"cate_name1": "女装",
						"cate_name2": "臻选",
						"cate_name3": "热款",
						"is_hot":1,
						"status":1,
						"create_at":"2023-0714 12:00:00"
					},
				],
				socketUrl: '',
			}
		},
		onPageScroll(e) {
			this.heightTop = e.scrollTop;
		},
		onLoad() {
			let token = '12613|PL40UQT6KQXGQUED68TH79EBDWYX2BAD';
			this.socketUrl = 'ws://kfbl.newmskjs.com' + '/websocket/'+ token;
			// console.log("socketUrl",this.socketUrl);
		},
		onShow() {
			// this.init();
		},
		methods: {
			init(){
				this.initSocket();
			},
			goNext(){
				uni.navigateTo({
					url: '/pages/type/upload'
				})
			},
			btnClick(){
				
			},
			// 发送心跳包
			startHeartbeat () {
				// HeartBeat 这里是和后端约定好的值，我们发送给后端，后端再把这个值返给我们
				// 目的就是让后端知道我们一直在
				const heartbeatMsg = 'HeartBeat';
				const sendHeartbeat = () => {
					if (this.socketOpen) {
						uni.sendSocketMessage({
							data: heartbeatMsg,
						}).catch(error => {
							console.log('发送心跳消息失败:', error);
							this.reconnect()
						});
					}
				};
				this.socketTimer = setInterval(sendHeartbeat, 5000); // 每5秒发送一次心跳消息
			},
			// Socket连接
			initSocket() {
				var that = this;
				uni.connectSocket({
					url: that.socketUrl,
					// header: {
					// 	'content-type': 'application/json'
					// },
				});
				uni.onSocketOpen(res => {
					this.socketOpen = true;
					console.log('WebSocket连接已打开！');
					this.startHeartbeat();
					// this.subIndexTradeMessage();
				});
				uni.onSocketMessage(res => {
					if (res.data === 'HeartBeat') {
						console.log(res.data, "心跳");
						return;
					} else {
						const data = JSON.parse(res.data);
						console.log(data, "有新的消息");
						// this.setTradeData();
					}
				});
				uni.onSocketError(res => {
					// this.initSocket();
					this.socketOpen = false;
					this.reconnect();
				});
				uni.onSocketClose(res => {
					console.log('WebSocket 已关闭！');
					this.socketOpen = false;
					this.reconnect();
					// this.unSubIndexTradeMessage();
				});
			},
			setTradeData(data) {
				console.log("data<<<<",data);
				if(this.userUrlList.length > 0){
					this.userUrlList.forEach((item,index) =>{
						if(item.rank == data.rank){
							let cre_date = data.cre_date.substr(0,4)+'-'+data.cre_date.substr(4,2)+'-'+data.cre_date.substr(6,2);
							let cre_time = data.cre_time.substr(0,2)+':'+data.cre_time.substr(2,2)+':'+data.cre_time.substr(4,2);
							let times = cre_date+' '+cre_time;
							console.log("时间：",times);
							this.$set(item,'up_date',times);
						}
					})
				}
			},
			// 开始重连
			reconnect () {
				clearTimeout(this.socketTimer);
				clearInterval(this.socketTimer);
				this.socketTimer = setTimeout(() => {
					console.log('开始重连...');
					this.initSocket();
				}, 5000); // 延迟3秒后进行重连
			},
			subIndexTradeMessage() {
				var sendInfo = {};
				sendInfo.method = 'sub';
				sendInfo.type = 2;
				sendInfo.token = this.token;
				this.sendMessage(JSON.stringify(sendInfo));
			},
			unSubIndexTradeMessage() {
				var sendInfo = {};
				sendInfo.method = 'unsub';
				sendInfo.type = 2;
				sendInfo.token = this.token;
				this.sendMessage(JSON.stringify(sendInfo));
			},
			parseJSONorNot(mayBeJSON) {
				if (typeof mayBeJSON === 'string') {
					return JSON.parse(mayBeJSON);
				} else {
					return mayBeJSON;
				}
			},
			sendMessage(message) {
				if (this.socketOpen) {
					uni.sendSocketMessage({
						data: message,
					}).catch(error => {
						console.log('发送心跳消息失败:', error);
						this.reconnect()
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	
</style>
